<template>
  <div style="border: 1px solid #ccc;">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode"/>
    <Editor style="height: 500px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode"  @onCreated="onCreated" @onChange="onChange" />
  </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import {baseURL,tokenName} from '@/config';
import store from "@/store";
export default {
  components: { Editor, Toolbar },
  props:{
    content : {type : String, default: ''}
  },
  data() {
    return {
      html : '',
      editor: null,
      toolbarConfig: { },
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF:{
          uploadImage: {
            fieldName: 'file',
            server: baseURL + "/common/editorupdate",
            maximgSize: 10 * 1024 * 1024, // 10M
            allowedimgTypes: ['image/*'],
            headers:{
              [tokenName] : store.getters['user/accessToken'],
            }
          }
        }
      },
      mode: 'default', // or 'simple'
    }
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  mounted() {
    setTimeout(()=>{
      this.html = this.content
    },100)
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    onChange(editor) {
      const text = editor.getHtml()
      this.$emit('update:content', text)
    },
  }
}
</script>

<style scoped>

</style>
